/*83856*/
<template>
  <div id="demo">
    <div id="nwwest-roll" :style="{'height': styleHeight + 'px'}" class="nwwest-roll">
      <ul id="roll-ul" class="roll-ul">
        <li v-for="(item, index) in list" ref="rollul" :class="{anim:animate==true}"
            :style="{'height': styleHeight + 'px'}" class="rollLi">
          <span class="name">{{ item }}</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    number: {
      type: Number,
      default: 0
    },
    styleHeight: {
      type: Number,
      default: 0
    }
  },
  watch: {
    number(newValue, oldValue) {
      this.list[1] = newValue
      this.list[0] = oldValue
      this.num = newValue;
    }
  },
  data() {
    return {
      animate: true,
      list: [this.number, this.number],
      num: this.number,
      newNum: this.number,
      timeout: '',
      timeInterval: ''
    }
  },
  mounted() {
    this.timeInterval = setInterval(() => {
      this.scroll(this.number);
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.timeout)
    clearInterval(this.timeInterval)
  },
  methods: {
    scroll(num) {
      let con1 = this.$refs.rollul;
      /* styleHeight */
      // let marginTopHeight = (this.styleHeight - 10) + 'px'
      con1[0].style.marginTop = 0;
      this.animate = !this.animate;
      var that = this;
      that.timeout = setTimeout(() => {
        that.list[1] = num
        con1[0].style.marginTop = -this.styleHeight + 'px';
        that.animate = !that.animate;
        setTimeout(() => {
          that.list[0] = num
        }, 1000);
      }, 80)
    }
  }
}
</script>

<style lang="scss" scoped>
.nwwest-roll {
  overflow: hidden;
}

.nwwest-roll .name {
  display: inline-block;
}

.roll-ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.anim {
  transition: all 1s;
}
</style>
